<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:04:56
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:37
-->
<template>
  <div class="details">
    <div class="wrapper">
      <h2 class="name">{{ data.name }}</h2>
      <div class="content" v-html="data.details"></div>
      <!-- 报名 -->
      <div class="report">
        <el-button type="primary" @click="toApply()">报名</el-button>
        <br>
        <el-link type="primary" @click="toApplyQuery()">已报名？查看报名进度 >></el-link>
      </div>
      <!-- 报名结束 -->
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      id: "",
      data: {},
    };
  },
  methods: {
    // 查询项目的详细信息
    findProjectDetails() {
      // 数据交互
      get("/index/project/findById?id=" + this.id).then((res) => {
        if (res.status == 200) {
          this.data = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    // 报名
    toApply(){
      this.$router.push({path:'/apply',query:{id:this.id}})
    },
    // 查看报名进度
        toApplyQuery(){
      this.$router.push({path:'/applyQuery',query:{id:this.id}})
    }
  },
  created() {
    // 在页面加载的时候拿到数据
    // 拿到从上一个页面传过来的id值
    this.id = this.$route.query.id;
    this.findProjectDetails();
  },
};
</script>
<style scoped lang='scss'>
.details {
  .wrapper{
    .name {
    text-align: center;
    }
    .report{
      text-align: center;
    }
  }
}
</style>